Check Page Listing Detail Accessibility with Voice Over
On this page
Check Current Page Accessibility with VoiceOver on Mac
Now that we’ve updated the semantic structure of our markup, let’s check our work with a screen reader.
Open Safari and navigate to the Listing Detail page for Cranberry Lake, then hit Fn + CMD + F5 to launch VoiceOver on a laptop keyboard (Cmd + F5 on a desktop keyboard).
Navigating the Page with the VoiceOver Rotor
The VoiceOver Rotor is another way that users can navigate a page.
The Rotor is activated by CTRL + Option + U and can be cycled through with the left and right Arrow keys. Up and down Arrow keys will navigate through items and Enter or Space will select one. You can exit the Rotor with the Escape key.
Hit CTRL if you want VoiceOver to stop reading.
Checking Headings
When the Rotor displays the Headings menu, you can see that it matches the structure we saw in Web Developer Toolbar. This makes it easy for the user to jump directly to a piece of content.
It’s important to test with a screen reader, even when tools don’t find any issues.
Checking Landmarks
The VoiceOver Rotor also features a Landmarks menu that displays what we expect as well.
Note that the “Site description and booking calendar” and “Image Gallery” landmarks are shown from the aria-label attributes we added to section tags.
If you were to remove the aria-label from any of the sections, they would no longer show in the VoiceOver Rotor. Safari and VoiceOver made this decision likely in response to the overuse of the section tag.
In order to have a section landmark show up in the screen reader, it needs to have an accessible name. The aria-label technique is one approach, but we’ll go more into this topic again later.
Video Transcript
So I'm going to come over to safari. We haven't really done any screen reader, testing it today. So let's, let's start that off. So I'm going to come over to. Listings come to our listing detail page and hit refresh just to make sure we've got the most current version. So on my Mac, I am going to fire voiceover using function, command F5
voiceover on safari camp spots, window camp spots web content has keyboard focus. So I hit control to get it, to stop reading if you, if you need it to a hush down. And so when I'm going to open now is called the voiceover rotor and I'll do that with command option+U. Show page source console show, page source, web content.
You are currently on attack. The control option you one shift over on the keyboard, no items informed controls menu. Okay. So I'm going to use my right arrow, key to cycle through the items in the rotor, no items in buttons, menu, image, no items in images, menu. Okay. There's something going on with voiceover.
I'm going to close this and maybe shift refresh or something. So I'm going to close it. I think it might've been trying to read zoom. So let's start over. I'm going to do shift, refresh to fire up voiceover. I will do function command F5 voiceover on safari camp spots, window camp spots web content has keyboard.
So then I will do control option you to open the voiceover rotor images menu. Okay, so now we've got images We only have one. That's actually our logo image, our header, a header, big header graphic is a CSS background image. And so it hasn't been marked up to have any image type characteristics to it.
If I use my right or left arrow keys, I can cycle through the items in the voiceover rotor menu, got a couple of links. Our menu mega menu is closed right now. So that's why none of the links are showing up in the rotor. Here's our heading structure. So we've got another representation of our heading structure.
And when you're using tooling, like the web developer toolbar, or any other tooling, keep in mind that the tool might show you things that aren't exactly what the screen reader is showing like web developer toolbar, for example, has a few shortcomings. Like if you run it on GitHub, for example, It's not super helpful.
Cause GitHub has some really cutting edge, like web components and things that sort of mess up the web developer toolbar. So really what you should count on is what is the screen reader doing? What is the voiceover rotor showing or the elements list? And NVDA, that's what wins cause that's, what's going to affect user experience.
So the voiceover rotor here is showing us our headings one through a one through four. If I keep going to find landmarks controls, menu landmarks menu. Here we go. So now we've got our landmarks, banner navigation, main our page listing I'm going to close out a voiceover, go remove that label and show you what happens in our rotor. So let's come back over here. I'm going to take this aria label off to show you it didn't always work this way. I used to we used to see all sections, so I'm gonna hit refresh.
I'll do open voiceover again with function command F5 voiceover on safari camp spots, window web content landmarks. We're currently in a voiceover. So our section is gone now because it doesn't have a label voiceover and safari, they've sort of made this executive decision that because sections are the new div and they were just getting slapped on everything without labels.
They've stripped them out of the screenreader output. Now. Which, you know, they had the reasons. So for you as a developer or a tester, you know, someone who's looking at semantic structure of a page, know that to get a section landmark, to show up in assistive technology at least in the voiceover rotor, adding a label to it or what we call an accessible name.
And we'll be looking at that much more in exercise three. But that's how you get it to show up here. That's how you get it to show up in the rotor is by adding a label. So I'm going to close out in voiceover voiceover off and I'll restore our ARIA label. We'll leave that on there for now. So you can kind of see, like, depending on your page content, you know, you might need to get more detailed.
You know, if there's a ton of page content, You can sort of make those subjective choices about like how you want to structure things. I'm going to open up the chat.
So that's how you label sections.
So back to page listing detail. So we've added more semantic structure.
I'm going to show one more tool, one more tool view. So I'll hit refresh again. And let's go see in accessibility insights under landmark. Now, we've got this page listing information region landmark. So the section its underlying role as we call it as what's called a region and it's got that label showing up.
I think one thing I don't love about accessibility insights in this way is that all of these labels are stacked on top of each other now. So we've got the outline for the header banner, the main and the page listing. Because of the CSS of the page, all of those labels are stacked on top of each other.
So that can be a little bit hard to visualize. I like voiceover. That rotor tool really does a great trick to show us what's actually being exposed in assistive technology when accessibility insights, display kind of makes it hard to see all of our landmarks here. Okay. So I'm going to turn this off.